Линейные градиенты при помощи CSS3

Уже давно, насколько мы можем припомнить, цветные градиенты использовались в веб дизайне. Если вы хотите сделать красивую кнопку, панель, прогресс бар или другой элемент пользовательского интерфейса, то градиент как раз, то, что надо.
До нынешнего времени, чтобы сделать градиент, мы были вынуждены использовать повторяющийся фоновый рисунок. Конечно, создавать градиенты при помощи Photoshop, Fireworks или другого графического редактора не сложно, но это создает некоторые проблемы, например, чтобы просто немного изменить цветовой оттенок градиента необходимо заново создавать графический файл. Не правда ли будет намного удобнее иметь полный контроль над градиентами, используя CSS.

Создадим простой градиент

Чтобы создать простой линейный градиент, нам нужно задать начальный и конечный цвета, примерно так:

CODE:


background-image: linear-gradient(rgb(100,100,100),
rgb(200,200,200));
background-image: -o-linear-gradient(rgb(100,100,100),
rgb(200,200,200));
/*для Opera,*/
background-image: -moz-linear-gradient(rgb(100,100,100),
rgb(200,200,200));
/*для Mozilla Firefox,*/
background-image: -webkit-linear-gradient(rgb(100,100,100),
rgb(200,200,200));
/*для Chrom и Safary*/
background-image: -ms-linear-gradient(rgb(100,100,100),
rgb(200,200,200));
/*для Internet Explorer.*/

Этот код создает простой градиент, который начинается с темно-серого вверху и заканчивается светло-серым внизу, как видно из картинки внизу.

css3 gradient

Изменяем углы градиента

В первом примере мы не устанавливали, какого либо направления или угла и градиент шел сверху вниз. Это направление по умолчанию и равнозначно тому, что мы напишем так:

CODE:


background-image: linear-gradient(top,rgb(100,100,100),
rgb(200,200,200));

Как мы видим, информация о направлении градиента идет вначале, отделяясь от информации о цветах при помощи запятых. Вы можете изменять направление градиента, изменяя ключевое слово, как показано на картинке ниже:

Мы также можем использовать такие значения как: top left, top right, bottom left, bottom right, чтобы задать направление по диагонали из одного угла в противоположный. Другой способ задания направления градиента заключается в использовании значения угла в градусах, например:

CODE:


background-image: linear-gradient(0deg,rgb(100,100,100),
rgb(200,200,200));

0deg = left
90deg = bottom
180deg = right
270deg = top
360deg опять таки = left

Использование Color stop

Color stop устанавливает ширину выбранного вами цвета относительно ширины градиента. Вы можете использовать столько цветов, сколько пожелаете и браузер будет высчитывать все цвета между этими точками. Посмотрим на пример, который демонстрирует градиент, начинающийся с top left и заканчивающийся на bottom right, изменяющий цвет со светло красного к темно красному:

CODE:


background-image: linear-gradient(top left,rgb(255,0,0),
rgb(150,0,0));

Это эквивалентно следующему:


background-image: -o-linear-gradient(top left,rgb(255,0,0) 0%,
rgb(150,0,0) 100%);

Итак, у нас первый color stop на 0% а второй на 100%. Но прописывать такие значения не имеет смысла, так как это значение по умолчанию. Давайте зададим значения color stops где ни будь между этими крайними значениями, например:

CODE:


background-image: linear-gradient(top left,rgb(255,0,0),
rgb(100,0,0) 50%,rgb(50,0,0) 75%,rgb(150,0,0));

Здесь мы начинаем со светло красного цвета, затем переходим к темно красному на 50% и к еще более темному на 75%, а потом возвращаемся к светлому на 100%, как это видно из следующего рисунка:

Делать это при помощи процентов действительно круто, и демонстрирует всю гибкость CSS3 градиентов. Градиент будет всегда отображаться правильно, даже если мы применим «резиновый» шаблон, где размеры градиента изменяются в зависимости от изменения размеров окна браузера.

При желании можно использовать также и другие единицы измерения, предусмотренные в CSS вместо процентов. Например:

CODE:


background-image: linear-gradient(top left,rgb(255,0,0),
rgb(100,0,0) 100px,rgb(50,0,0) 200px,rgb(150,0,0));

Должно получиться что-то вроде этого:

Прозрачные градиенты

Существует техника установки значения альфа канала цвета для градиента. Например:

CODE:


background-image: linear-gradient(top left,
rgba(100,100,100,1),rgba(100,100,100,0.5));

Здесь мы используем RGBA цвета, со значением альфа канала равным 1 в начале градиента и 0,5 в его конце. В итоге получается вот такой красивый эффект:

Повторяющиеся линейные градиенты

Вместо ключевых слов liner-gradient можно использовать repeating-liner-gradient, в таком случае значения color stops считываются и повторяются бесконечно. Применение процентов в данном случае не имеет никакого смысла, но используя пиксели и другие фиксированные единицы измерения, можно получить весьма занимательные эффекты. Например:

CODE:


background-image: repeating-linear-gradient
(20deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);

Здесь мы начинаем с ярко красного, затем на 20 пикселях переходим к темно красному, и потом возвращаемся назад к ярко красному на 40 пикселях. Такой градиент будет повторяться до конца блока, как видно из рисунка: